<template>
	<view class="content">
		<image class="uni-image" src="/static/img/back.png" mode="widthFix" @click="clickBack"></image>
		<view class="panel-mask-left">
			<view class="panel-mask-left-top">
				<image class="uni-image-logo" src="/static/logo.png" mode="widthFix"></image>
				<view class="panel-mask-name">
					<view class="panel-mask-yes-radio">{{accountName}}</view>
					<view class="panel-mask-left-item">
						<view class="panel-mask-date">学习日期 </view>
						<view class="panel-mask-complete">{{todayStr}}</view>
					</view>
				</view>
			</view>
			<view class="panel-mask-state" >
				<view class="panel-mask-state-item" v-for="(item, index) in listToday" :key="index">
					<view class="panel-mask-state-line">
						<view class="panel-text-name">{{item.name}}</view>
						<view class="panel-text-name-right">{{item.count}}词</view>
					</view>
					<view class="panel-mask-state-line-title">
						<view class="panel-text-title">课程</view>
						<view class="panel-text-title-right">学前筛选/学后认识/学后遗忘</view>
					</view>
					<view class="panel-mask-state-line-progress" v-for="(itemBook, indexBook) in item.data" :key="indexBook">
						<view class="panel-text-title">{{itemBook.name}}</view>
						<view class="panel-progress-bg" >
							<view class="panel-progress-box" :style="{'width': itemBook.percent+'%'}">
								<view class="panel-text-no">
									已完成{{itemBook.studyCount}}共{{itemBook.allCount}}词
								</view>
							</view>
							<view class="panel-text-no">
								{{itemBook.wordsCount}}
								/{{itemBook.wordsCount-itemBook.noCount}}
								/{{itemBook.noCount}}
							</view>
						</view>				
					</view>
				</view>
			</view>
		</view>
		<view class="panel-mask-right">
			<qiun-data-charts
				background="white"
				type="column"
				:opts="opts" 
				:chartData="chartData" 
			/>
		</view>
	</view>
</template>

<script>
	import { getStudyLogList, formatDate, formatTime, getUserBookList } from '@/api/api.js';
	import store from "../../store";
	export default {
		mounted() {
		        // #ifdef APP-PLUS
		        plus.screen.lockOrientation('landscape');
		        // #endif
		    },
		data() {
			return {
				userId: 0,
				accountName: '',
				user_type: 0,
				todayStr: '',
				listToday: [{name:'今日学新', count:0, data:[]},
					{name:'今日复习', count:0, data:[]},
				],
				opts: {
					extra:{column:{type:'stack'}},
				},
				chartData: {}
			}
		},
		onLoad(options) {
			this.todayStr = formatDate(new Date());
			const userInfo = store.state.app.userInfo;
			if( userInfo){
				this.accountName = userInfo.nickname;
				this.userId = userInfo.id;
				this.user_type = userInfo.user_type;
			}
			let student = uni.getStorageSync('student_info');
			if( student){
				this.accountName = student.nickname;
				this.userId = student.id;
			}
				
			let that = this;
			let params = {pageSize:99, 
							params:{user_id: this.userId}};
			getStudyLogList(params).then(res => {
				let ret = {
					categories: [],
					series: [
						{name: "复习", textOffset:16, data: []},
						{name: "复习遗忘", textOffset:16, data: []},
						{name: "学新", textOffset:16, data: []},
						{name: "学新遗忘", textOffset:16, data: []},
					]
				};
				if( 0 == res.code){
					if( !res.data){
						res.data = {studyWords:[], rows:[]};
					}
					for( let item of res.data.studyWords){
						item.wordsCount = item.words.split(',').length;
					}
					// console.log(res.data);
					let inserts = [];
					for( let row of res.data.rows){	
						let findItem = res.data.studyWords.find(i=>i.id==row.study_id);
						if( !findItem){
							continue;
						}
						let dateStr = formatDate(new Date(row.gmt_create));
						if( inserts.findIndex(i=>i.dateStr==dateStr&&i.study_id==row.study_id) >= 0){
							// 当天记录已存在
							continue;
						}
						inserts.push({dateStr, study_id: row.study_id});
						
						let wordsCount = findItem.wordsCount;
						let noCount = row.no_count;
						if( noCount > wordsCount){
							noCount = wordsCount;
						}
						if( ret.categories.length <= 0 || ret.categories[0]!=dateStr){
							if( ret.categories.length >=2 ){
								// 只显示最近两次的数据
								break;
							}
							ret.categories.splice( 0, 0, dateStr);
							for( let item of ret.series){
								item.data.splice( 0, 0, 0);
							}
						}
						
						let studyDate = formatDate(new Date(findItem.gmt_create));
						if( studyDate == dateStr){
							// 学新
							ret.series[2].data[0] += wordsCount;
							ret.series[3].data[0] += noCount;
						}else{
							ret.series[0].data[0] += wordsCount;
							ret.series[1].data[0] += noCount;
						}
						if( dateStr == this.todayStr){
							// 计算今日数据
							let todayItem = this.listToday[0];
							if( studyDate != dateStr){
								todayItem = this.listToday[1];
							}
							let addItem = todayItem.data.find(i=>i.book_id==findItem.book_id);
							if( !addItem){
								addItem = {book_id: findItem.book_id, 
									wordsCount: 0, 
									noCount: 0
								};
								todayItem.data.push(addItem);
							}
							addItem.wordsCount += wordsCount;
							addItem.noCount += noCount;
						}
					}
					// 数值是0的不显示
					for( let item of ret.series){
						for( let i=0; i<item.data.length; i++){
							if( item.data[i] <= 0){
								item.data[i] = '';
							}
						}
					}
					this.innerGetUserbook();
				}
				
				this.chartData = ret;
			}).catch(error => {
				// 处理异常
				console.error('发生错误:', error);
			});
		},
		methods: {
			clickBack(){
				uni.navigateBack();
			},
			innerGetUserbook(){
				let params = {user_id: this.userId};
				getUserBookList(params).then(res => {
					if( 0 == res.code && res.data ){
						// console.log(res.data.rows);
						for( let i=this.listToday.length-1; i>=0; i--){
							let item = this.listToday[i];
							if( item.data.length <= 0){
								// 没有数据删除
								//this.listToday.splice(i, 1);
								continue;
							}
							for( let itemBook of item.data){
								item.count += itemBook.wordsCount;
								let findItem = res.data.rows.find(iBook=>iBook.id==itemBook.book_id);
								if( findItem){
									itemBook.name = findItem.name;
									itemBook.allCount = findItem.wordsCount;
									itemBook.studyCount = findItem.studyCount;
									if( itemBook.allCount <= 0){
										itemBook.percent = 50;
									}else{
										itemBook.percent = parseInt(100*itemBook.studyCount/itemBook.allCount);
									}
								}
							}
						}
					}
				}).catch(error => {
					// 处理异常
					console.error('发生错误:', error);
				});
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/bg.jpg');
		background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.uni-image {
		width: 6%;
		margin-left: 4%;
		margin-top: 15vmin;
	}

	.panel-mask-left {
		margin-top: 15vmin;
		margin-left: 1%;
		width: 80vmin;
		height: 70vmin;
		display: flex;
		flex-direction: column;
	}
	.panel-mask-left-top{
		background-color: white;
		border-radius: 2vmin;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 20vmin;
	}
	.uni-image-logo {
		width: 14vmin;
		margin-left: 2vmin;
	}
	.panel-mask-name{
		display: flex;
		flex-direction: column;
		margin-left: 2vmin;
		width: 60vmin;
	}
	.panel-mask-yes-radio {
		width: 100%;
		height: 9vmin;
		color: orange;
		font-size: 6vmin;
	}
	.panel-mask-left-item{
		display: flex;
		flex-direction: row;
	}
	.panel-mask-date{
		font-size: 4vmin;
	}
	.panel-mask-complete {
		width: 70%;
		height: 5vmin;
		text-align: right;
		font-size: 4vmin;
	}
	.panel-mask-state {
		background-color: white;
		border-radius: 2vmin;
		margin-top: 2vmin;
		width: 100%;
		height: 48vmin;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}
	.panel-mask-state-item{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 3%;
		width: 94%;
	}
	.panel-mask-state-line{
		width: 100%;
		margin: 2vmin 0;
		height: 6vmin;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.panel-mask-state-line-title{
		width: 100%;
		height: 6vmin;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #eeeeee;
		border-radius: 2vmin;
	}
	.panel-text-name{
		font-size: 4vmin;
		width: 30%;
	}
	.panel-text-name-right{
		font-size: 4vmin;
		text-align: right;
		width: 70%;
	}
	.panel-text-title{
		font-size: 3vmin;
		width: 30%;
		text-align: center;
	}
	.panel-text-title-right{
		font-size: 3vmin;
		text-align: center;
		width: 70%;
	}
	.panel-mask-state-line-progress{
		width: 100%;
		margin-top: 1vmin;
		height: 6vmin;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.panel-progress-bg{
		width: 70%;
		height: 5vmin;
		background-color: orange;
		border-radius: 2vmin;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.panel-progress-box{
		height: 5vmin;
		background-color: darkgreen;
		border-radius: 2vmin;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.panel-text-no{
		font-size: 3vmin;
		color: white;
		white-space: nowrap;
	}
	
	.panel-mask-right {
		margin: 15vmin 4% ;
		width: 70vmin;
		height: 70vmin;
	}
</style>
